<template>
  <div class="register">
    <common-head title="注册" rightText></common-head>
    <van-cell-group>
      <span class="reg-title">注册</span>
      <van-field v-model.trim="reg.us" clearable placeholder="请输入注册用户名" />
      <van-field
        v-model.trim="reg.ps"
        type="password"
        placeholder="请输入密码"
        @keyup.enter.native="register"
      />
      <van-button type="info" round @click="register" size="large">注册</van-button>
      <van-checkbox v-model="checked" shape="square" checked-color="#07c160">
        <span>我同意</span>
        <a href>《药房网商城用户服务协议》</a>
      </van-checkbox>
    </van-cell-group>
    <p class="go-log">
      <span @click="$router.push({path:'/login'})">登录</span>
      <span class="margin">|</span>
      <span @click="$router.go(0)">注册</span>
    </p>
    <common-linkfloor></common-linkfloor>
    <common-scolltop></common-scolltop>
  </div>
</template>

<script>
// import qs from "qs";
// import axios from "axios";
import CommonHead from "@/components/CommonHead";
import CommonLinkfloor from "@/components/CommonLinkfloor";
import CommonScolltop from "@/components/CommonScolltop";
export default {
  data() {
    return {
      reg: {
        us: "",
        ps: ""
      },
      checked: 1
    };
  },
  methods: {
    register() {
      if (this.checked == 1) {
        if (window.localStorage.userArr) {
          //判断是否存在
          var array = JSON.parse(window.localStorage.userArr);
        } else {
          array = []; //创建一个新数组
        }
        if (this.reg.us == "" || this.reg.ps == "") {
          this.$toast.fail({
            message: "账号或密码输入为空！",
            duration: 1000
          });
          return;
        }

        for (var i = 0; i < array.length; i++) {
          //判断是否有相同账号
          if (this.reg.us == array[i].username) {
            this.$toast.fail({
              message: "注册失败！该账号已存在",
              duration: 1000
            });
            return;
          }
        }
        //创建对象
        var obj = { username: this.reg.us, password: this.reg.ps };
        array.push(obj);
        window.localStorage.userArr = JSON.stringify(array);
        let _this = this;
        this.$toast.success({
          message: "注册成功！正在跳转登录",
          duration: 1000,
          onClose() {
            _this.$router.push("/login");
          }
        });
      } else {
        this.$toast.fail({
          message: "请先同意用户协议！",
          duration: 1000
        });
      }
    }
  },
  components: {
    CommonHead,
    CommonLinkfloor,
    CommonScolltop
  }
};
</script>

<style lang="less" scoped>
.register {
  color: #333;
  padding-top: 65px;
  .van-cell-group {
    padding: 10px 38px 40px;
    .reg-title {
      display: inline-block;
      padding: 0 8px;
      font: 18px/30px "微软雅黑";
      margin-bottom: 38px;
      position: relative;
      z-index: 0;
    }
    .reg-title::before {
      position: absolute;
      z-index: -1;
      bottom: 4px;
      left: 0;
      content: "";
      width: 100%;
      height: 4px;
      box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
        rgba(131, 241, 219, 0.59);
      background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
        linear-gradient(#94ffc4, #94ffc4);
    }
    .van-cell {
      padding: 0;
      width: 100%;
      height: 39px;
      margin-bottom: 23px !important;
      /deep/.van-cell__value {
        border-bottom: 1px solid #ccc !important;
        line-height: 40px;
        font-size: 18px;
      }
    }
    .van-button {
      border-color: transparent;
      background-image: linear-gradient(270deg, #00c891 0, #1fdb9b 100%),
        linear-gradient(#fff, #fff);
      background-blend-mode: normal, normal;
      box-shadow: 0 0.19rem 0.41rem 0 rgba(31, 219, 155, 0.5);
      font-size: 18px;
    }
    .van-button--large {
      margin-top: 15px;
      letter-spacing: 4px;
    }
    .van-checkbox {
      margin-top: 18px;
      font-size: 16px;
      a {
        color: #0cb95f;
        margin-left: 8px;
      }
    }
  }
  .go-log {
    color: #1fdb9b;
    text-align: center;
    .margin {
      margin: 0 16px;
    }
  }
}
</style>